<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器作业</title>
		<link href="../../WebDemo/CSS/button_Submit_Reset.css" rel="stylesheet" />
	</head>
	<body>
		
		<!--  -->
		<!-- 文本框 默认输入的一定是字符串 即使是类型为number -->
		<div id="app">
			<table>
				<tr>
					<td colspan="3">
						<h5>相加结果：{{result}}</h5>
					</td>
				</tr>
				<tr>
					<td><input type="number" v-model="num1" placeholder="请输入num1..." /></td>
					<td><input type="number" v-model="num2" placeholder="请输入num1..." @keyup.enter="add()" /></td>
					<td><input type="button" class="update" @click="add()" value="计算" /></td>
				</tr>

			</table>

		</div>

		<script src="../js/vue.js"></script>
		<script>
			
			const APP = new Vue({
				el: "#app",
				data: {
					num1: 0,
					num2: 0,
					result: ''
				},
				methods: {
					add() {
						this.result = parseInt(this.num1) + parseInt(this.num2)
					}
				}

			})
		</script>
	</body>
</html>
